<template>
  <div class="uploadFile">
    <el-upload
      class="upload-demo"
      ref="upload"
      :on-remove="handleRemove"
      action="https://jsonplaceholder.typicode.com/posts/"
      :before-remove="beforeRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :auto-upload="false"
      :on-change="onUploadChange"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传XXX文件，且不超过500kb
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    fileList: {
      require: true,
      defaults: () => ({}),
    },
    file: {
      require: true,
      defaults: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    // fileListTem: {
    //   get() {
    //     return this.fileList
    //   },
    //   set(v) {
    //     console.log(v)
    //     this.$emit('update:fileList', v)
    //   },
    // },
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    onUploadChange(file) {
      console.log(file)
      this.$emit('update:file', file.raw)
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
  },
}
</script>

<style lang="scss" scoped>
.uploadFile {
}
</style>
